<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>

		<link rel="stylesheet" href="/css/common.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />

		<!-- patcat网站建设时，用到 -->

		<!-- ********** swiper ********** -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

		<!-- factory -->
		<style>
			.mySwiper .swiper-slide {
				width: 25%;
				height: 100%;
				opacity: 0.4;
			}

			.mySwiper .swiper-slide-thumb-active {
				opacity: 1;
			}

			.mySwiper .swiper-slide-thumb-active .hidden {
				opacity: 0;
			}

			.mySwiper .swiper-slide-thumb-active .visible {
				opacity: 1;
			}

			.mySwiper .visible {
				opacity: 0;
			}

			@media screen and (max-width: 600px) {
				.factory-h {
					height: auto !important;
				}
			}
		</style>
	</head>
	<body>
		<div class="w-100 factory-h">
			<div class="swiper mySwiper2">
				<div class="swiper-wrapper">
					<div class="swiper-slide position-relative">
						<img class="w-100 d-none d-sm-block" src="//qn1.10soo.net/assets24/202404021703773.png" />
						<img class="w-100 d-sm-none" src="//qn1.10soo.net/assets24/202404101118715.jpg" />
						<div class="position-absolute w-100 start-0 bottom-0 pb-6r pb-sm-10 pb-xl-7r px-12">
							<h1 class="fs-1 font-AB">1</h1>
						</div>
					</div>
					<div class="swiper-slide position-relative">
						<img class="w-100 d-none d-sm-block" src="//qn1.10soo.net/assets24/202404021713949.jpg" />
						<img class="w-100 d-sm-none" src="//qn1.10soo.net/assets24/202404101122327.jpg" />
						<div class="position-absolute w-100 start-0 bottom-0 pb-6r pb-sm-10 pb-xl-7r px-12">
							<h1 class="fs-1 font-AB">2</h1>
						</div>
					</div>
					<div class="swiper-slide position-relative">
						<img class="w-100 d-none d-sm-block" src="//qn1.10soo.net/assets24/202404021703773.png" />
						<img class="w-100 d-sm-none" src="//qn1.10soo.net/assets24/202404101118715.jpg" />
						<div class="position-absolute w-100 start-0 bottom-0 pb-6r pb-sm-10 pb-xl-7r px-12">
							<h1 class="fs-1 font-AB">3</h1>
						</div>
					</div>
					<div class="swiper-slide position-relative">
						<img class="w-100 d-none d-sm-block" src="//qn1.10soo.net/assets24/202404021713949.jpg" />
						<img class="w-100 d-sm-none" src="//qn1.10soo.net/assets24/202404101122327.jpg" />
						<div class="position-absolute w-100 start-0 bottom-0 pb-6r pb-sm-10 pb-xl-7r px-12">
							<h1 class="fs-1 font-AB">4</h1>
						</div>
					</div>
					<div class="swiper-slide position-relative">
						<img class="w-100 d-none d-sm-block" src="//qn1.10soo.net/assets24/202404021703773.png" />
						<img class="w-100 d-sm-none" src="//qn1.10soo.net/assets24/202404101118715.jpg" />
						<div class="position-absolute w-100 start-0 bottom-0 pb-6r pb-sm-10 pb-xl-7r px-12">
							<h1 class="fs-1 font-AB">5</h1>
						</div>
					</div>
					<div class="swiper-slide position-relative">
						<img class="w-100 d-none d-sm-block" src="//qn1.10soo.net/assets24/202404021713949.jpg" />
						<img class="w-100 d-sm-none" src="//qn1.10soo.net/assets24/202404101122327.jpg" />
						<div class="position-absolute w-100 start-0 bottom-0 pb-6r pb-sm-10 pb-xl-7r px-12">
							<h1 class="fs-1 font-AB">6</h1>
						</div>
					</div>
					<div class="swiper-slide position-relative">
						<img class="w-100 d-none d-sm-block" src="//qn1.10soo.net/assets24/202404021713949.jpg" />
						<img class="w-100 d-sm-none" src="//qn1.10soo.net/assets24/202404101122327.jpg" />
						<div class="position-absolute w-100 start-0 bottom-0 pb-6r pb-sm-10 pb-xl-7r px-12">
							<h1 class="fs-1 font-AB">7</h1>
						</div>
					</div>
				</div>
				<!-- <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div> -->
			</div>
			<div thumbsSlider="" class="swiper mySwiper px-6 px-sm-5 mt-8 text-uppercase">
				<div class="swiper-wrapper">
					<div class="swiper-slide ratio ratio-4x3 position-relative">
						<img class="w-100 h-100 object-fit" src="//qn1.10soo.net/assets24/202404021703773.png" />
						<div class="position-absolute w-100 h-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center hidden text-center">1</div>
						<div class="position-absolute w-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center visible border-bottom border-5 border-warning"></div>
					</div>
					<div class="swiper-slide ratio ratio-4x3 position-relative">
						<img class="w-100 h-100 object-fit" src="//qn1.10soo.net/assets24/202404021713949.jpg" />
						<div class="position-absolute w-100 h-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center hidden text-center">2</div>
						<div class="position-absolute w-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center visible border-bottom border-5 border-warning"></div>
					</div>
					<div class="swiper-slide ratio ratio-4x3 position-relative">
						<img class="w-100 h-100 object-fit" src="//qn1.10soo.net/assets24/202404021703773.png" />
						<div class="position-absolute w-100 h-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center hidden text-center">3</div>
						<div class="position-absolute w-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center visible border-bottom border-5 border-warning"></div>
					</div>
					<div class="swiper-slide ratio ratio-4x3 position-relative">
						<img class="w-100 h-100 object-fit" src="//qn1.10soo.net/assets24/202404021713949.jpg" />
						<div class="position-absolute w-100 h-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center hidden text-center">4</div>
						<div class="position-absolute w-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center visible border-bottom border-5 border-warning"></div>
					</div>
					<div class="swiper-slide ratio ratio-4x3 position-relative">
						<img class="w-100 h-100 object-fit" src="//qn1.10soo.net/assets24/202404021703773.png" />
						<div class="position-absolute w-100 h-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center hidden">5</div>
						<div class="position-absolute w-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center visible border-bottom border-5 border-warning"></div>
					</div>
					<div class="swiper-slide ratio ratio-4x3 position-relative">
						<img class="w-100 h-100 object-fit" src="//qn1.10soo.net/assets24/202404021713949.jpg" />
						<div class="position-absolute w-100 h-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center hidden">6</div>
						<div class="position-absolute w-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center visible border-bottom border-5 border-warning"></div>
					</div>
					<div class="swiper-slide ratio ratio-4x3 position-relative">
						<img class="w-100 h-100 object-fit" src="//qn1.10soo.net/assets24/202404021713949.jpg" />
						<div class="position-absolute w-100 h-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center hidden">7</div>
						<div class="position-absolute w-100 start-0 top-0 fs-1 d-flex align-items-center justify-content-center visible border-bottom border-5 border-warning"></div>
					</div>
				</div>
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
		<script>
			var swiper = new Swiper('.mySwiper', {
				// loop: true,
				spaceBetween: 10,
				freeMode: true,
				watchSlidesProgress: true,
				breakpoints: {
					// when window width is >= 320px
					320: {
						slidesPerView: 3.5,
					},
					// when window width is >= 480px
					480: {
						slidesPerView: 3,
					},
					// when window width is >= 640px
					768: {
						slidesPerView: 6,
					},
				},
			});
			var swiper2 = new Swiper('.mySwiper2', {
				// loop: true,
				spaceBetween: 10,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				thumbs: {
					swiper: swiper,
				},
				effect: 'fade',
			});
		</script>
	</body>
</html>
